<template>
	<div style="padding: 8px;background-color: #F5F5F5;padding-right: 0px;">
		<div class="yunui-nav-section">
			<div class="yunui-section-header" v-if="menuArray.name!=undefined">
				<div class="yunui-section-title">{{menuArray.name}}</div>
			</div>
			<div class="yunui-nav-tree">
				<ul>
					<template v-for="(item,index) in menuArray">
						<li class="" :key="index" v-if="item.group==true">
							<div class="yunui-nav-tree-module" style="margin-left:10px;background-color:#178386;">
								<div class="yunui-nav-tree-module-text">{{item.name.substring(0,1)}}</div>
							</div>
							<div class="yunui-nav-tree-text">{{item.name}}</div>
							<div style="clear: both;"></div>
						</li>
						<li class="" v-else :key="index+'_1'" @click="onItemClickHandler(item)"
							@dblclick="onItemDblClickHandler(item)">
							<div class="yunui-nav-tree-onlytext">{{item.name}}</div>
							<div style="clear: both;"></div>
						</li>
					</template>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MainNavTree',
		props: ["menuArray"],
		data() {
			return {

			}
		},
		methods: {
			onItemClickHandler(item) {
				this.$emit("itemClick", item);
			},
			onItemDblClickHandler(item) {
				this.$emit("itemDblClick", item);
			}
		},
	}
</script>

<style>
	
</style>
